<template>
    <yh-dialog
        :visible.sync="visibleTemp"
        v-bind="$attrs"
        :title="dialogTitle"
        :modal="false"
        :close-on-click-modal="false"
        drag
        zoomable
        width="750px"
        @close="handleCloseDialog"
    >
        <div class="dialog-main">
            <el-form label-width="120px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="数据源类型:">
                            <el-select
                                v-model="submitForm.dataSourceType"
                                @change="handleDataSourceType"
                                :disabled="isLook"
                                clearable
                                style="width: 100%"
                                size="mini"
                            >
                                <el-option v-for="i in orgTypeStorage" :key="i.value" :label="i.label" :value="i.value"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="数据源名称:">
                            <el-input v-model="submitForm.dataSourceName" :disabled="isLook" clearable size="mini"> </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-show="submitForm.dataSourceType !== 'API'">
                    <el-col :span="12">
                        <el-form-item label="用户名:">
                            <el-input v-model="submitForm.userName" :disabled="isLook" clearable size="mini"> </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="密码:">
                            <el-input
                                v-model="submitForm.passWord"
                                :disabled="isLook"
                                show-password
                                :placeholder="type === 'add' ? '' : '为空则认为不改密码'"
                                clearable
                                size="mini"
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-show="submitForm.dataSourceType !== 'API'">
                    <el-col :span="12">
                        <el-form-item label="数据库连接串:">
                            <el-input v-model="submitForm.jdbcUrl" :disabled="isLook" placeholder="jdbc:oracle:thin:@" clearable size="mini">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item label="监控点信息:">
                            <el-input v-model="submitForm.monitorInfo" :disabled="isLook" clearable size="mini"> </el-input>
                        </el-form-item>
                    </el-col> -->
                </el-row>
                <el-row v-show="submitForm.dataSourceType === 'API'">
                    <el-form-item label="接口地址:">
                        <el-input v-model="submitForm.apiUrl" :disabled="isLook" clearable size="mini"> </el-input>
                    </el-form-item>
                </el-row>
                <!-- <el-row v-show="submitForm.dataSourceType === 'API'">
                    <el-form-item label="请求方式:">
                        <el-select v-model="submitForm.requestType" @change="$forceUpdate()" :disabled="isLook" size="mini">
                            <el-option label="GET" value="GET"></el-option>
                            <el-option label="POST" value="POST"></el-option>
                        </el-select>
                    </el-form-item>
                </el-row> -->
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注:">
                            <el-input v-model="submitForm.remark" :disabled="isLook" type="textarea" size="mini"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button size="mini" v-show="type !== 'look'" type="primary" @click="handleTest"> 测 试 </el-button>
            <el-button size="mini" v-show="type !== 'look'" @click="handleReset"> 重 置 </el-button>
            <el-button size="mini" @click="handleCloseDialog"> 取 消 </el-button>
            <el-button size="mini" v-show="type !== 'look'" :loading="loading" type="primary" @click="handleSave"> 确 认 </el-button>
        </div>
    </yh-dialog>
</template>
<script lang="ts">
import { Component, Prop, PropSync, Vue, Watch } from 'vue-property-decorator';
import API from '../api/data-source';
import { DataSourceDTO } from '../vo/data-source';

@Component({ name: 'SourceDialog', components: {} })
export default class SystemParamSetting extends Vue {
    @PropSync('visible') syncVisible: boolean;
    @Prop() detail: any;
    @Prop() type: string; // add | look

    public visibleTemp: boolean = false;

    submitForm: DataSourceDTO = {
        dataSourceType: 'ORACLE',
        dataSourceName: '',
        userName: '',
        passWord: '',
        jdbcUrl: '',
        monitorInfo: '',
        remark: '',
        id: '',
        apiUrl: '',
        requestType: '',
    };

    loading: boolean = false;

    orgTypeStorage: any[] = [
        { label: 'MYSQL', value: 'MYSQL' },
        { label: 'ORACLE', value: 'ORACLE' },
        { label: '外部API接口', value: 'API' },
    ];

    created() {}

    mounted() {
        if (['look', 'edit'].includes(this.type)) {
            this.submitForm = JSON.parse(JSON.stringify(this.detail));
        }
    }

    @Watch('visible', { immediate: true, deep: true })
    onWatchVisible(value) {
        if (value !== this.visibleTemp) {
            this.visibleTemp = value;
        }
    }

    get dialogTitle() {
        const enumT = { add: '新增', look: '查看', edit: '编辑' };
        return `${enumT[this.type]}数据源${this.type === 'edit' ? '-' + this.detail.id : ''}`;
    }

    get isLook() {
        return this.type === 'look';
    }

    // @Watch('detail', { immediate: true })
    // watchdetail(newData) {
    //     if (newData) {
    //         this.submitForm = data;
    //     }
    // }

    /**
     * 保存事件
     */
    handleSave(): void {
        if (!this.verify()) return;
        this.loading = true;
        this.$emit('submit', this.submitForm);
    }

    verify() {
        if (!this.submitForm.dataSourceType) {
            this.yh_message_warn('数据源类型不能为空!');
            return false;
        }
        if (!this.submitForm.dataSourceName.trim()) {
            this.yh_message_warn('数据源名称不能为空!');
            return false;
        }
        if (['ORACLE', 'MYSQL'].includes(this.submitForm.dataSourceType)) {
            if (!this.submitForm.userName.trim()) {
                this.yh_message_warn('用户名不能为空!');
                return false;
            }
            if (this.type === 'add') {
                if (!this.submitForm.passWord.trim()) {
                    this.yh_message_warn('密码不能为空!');
                    return false;
                }
            }

            if (!this.submitForm.jdbcUrl.trim()) {
                this.yh_message_warn('数据库连接串不能为空!');
                return false;
            }
        }
        if (['API'].includes(this.submitForm.dataSourceType)) {
            if (!this.submitForm.apiUrl.trim()) {
                this.yh_message_warn('接口地址不能为空!');
                return false;
            }
        }
        // if (!this.submitForm.requestType && this.submitForm.dataSourceType === 'API') {
        //     this.yh_message_warn('请求方式不能为空!');
        //     return false;
        // }

        // if (JSON.stringify(this.submitForm) === JSON.stringify(this.detail)) {
        //     this.yh_message_warn('数据源无修改!');
        //     return false;
        // }
        return true;
    }

    /**
     * 数据源类型变动事件
     */
    handleDataSourceType() {
        this.submitForm.dataSourceName = '';
        this.submitForm.userName = '';
        this.submitForm.passWord = '';
        this.submitForm.jdbcUrl = '';
        this.submitForm.monitorInfo = '';
        this.submitForm.remark = '';
        this.submitForm.apiUrl = '';
        this.submitForm.requestType = '';
    }

    handleReset(): void {
        this.submitForm.dataSourceType = 'ORACLE';
        this.submitForm.dataSourceName = '';
        this.submitForm.userName = '';
        this.submitForm.passWord = '';
        this.submitForm.jdbcUrl = '';
        this.submitForm.monitorInfo = '';
        this.submitForm.remark = '';
        this.submitForm.apiUrl = '';
        this.submitForm.requestType = '';
    }

    /**
     * 数据源测试连接
     */
    handleTest() {
        // if (!this.verify()) return;
        API.testLinkData(this.submitForm).then((res: any) => {
            this.yh_message_success('连接成功!');
        });
    }

    /**
     * 关闭dialog事件
     */
    handleCloseDialog(): void {
        this.syncVisible = false;
    }
}
</script>
<style lang="scss" scoped>
</style>
